
<template>
    <div class="ksdate">
        <el-row class="timeBar" v-if="type !== 'daterange'">
            <el-date-picker
                ref="ksdate"
                v-model="realDate"
                align="right"
                :type="type"
                :format="startDate + ' ~ ' + endDate"
                placeholder="选择日期"
                :picker-options="pickerOptions"
                @change="changeDate"
            >
            </el-date-picker>
        </el-row>
      <el-row class="timeBar" v-if="type === 'daterange'">
        <el-date-picker
            ref="ksdate"
            v-model="value1"
            align="right"
            :type="type"
            range-separator="至"
            :start-placeholder="startDate"
            :end-placeholder="endDate"
            placeholder="选择日期"
            :picker-options="pickerOptions"
            @change="changeDate"
        >
        </el-date-picker>
      </el-row>
    </div>
</template>
<script>
import dayjs from 'dayjs'
export default {
    name: 'ksdate',
    props: {
        vuexModelName: {
            type: String,
            default: ""
        },
        id: {
            type: String,
            default: ""
        },
        type: {
            type: String,
            default: "date"
        },
        hasCompare: {
            type: Boolean,
            default: false
        },
        date: {
            type: [String,Number,Object,Date,null],
            default: null
        },
        changeDateType: {
            type: Function,
            default: () => { }
        }
    },
    components: {
    },
    data () {
        return {
            startDate: "",
            endDate: "",
            realDate: '',
            value1:  ''
        }
    },
    computed: {
        pickerOptions () {
            // let that = this
            return {
                shortcuts: [
                    {
                        text: '今天',
                        onClick (picker) {
                            // that.$emit("changeDateType", "date")
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick (picker) {
                            // that.$emit("changeDateType", "date")
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick (picker) {
                            // that.$emit("changeDateType", "date")
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    },
                    {
                        text: '本月',
                        onClick (picker) {
                            // that.$emit("changeDateType", "month")
                            const end = new Date();
                            const start = new Date();
                            start.setDate(1);
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '最近一个月',
                        onClick (picker) {
                            // that.$emit("changeDateType", "month")
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick (picker) {
                            // that.$emit("changeDateType", "month")
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }],
                firstDayOfWeek: 1
            }
        }
    },
    created () {
      console.log(this.date)
      this.realDate = this.date
      console.log(this.realDate)
      this.changeDate()
    },
    mounted () {
    },
    methods: {
        changeDate (v) {
          console.log(v)
            this.realDate = this.date
            let that = this
            let date = v || that.realDate
            // length 不为零时月份快捷选项'
            that.$nextTick(() => {
              if(v === null){
                this.startDate = '0000-00-00'
                this.endDate = '0000-00-00'
                this.$emit("changeCompare",false)
              }else{
                if (date.length) {
                  that.startDate = dayjs(date[0]).startOf(that.type).format('YYYY-MM-DD')
                  that.endDate = dayjs(date[1]).endOf(that.type).format('YYYY-MM-DD')
                  // date = that.endDate
                } else {
                  that.startDate = dayjs(date).startOf(that.type).format('YYYY-MM-DD')
                  that.endDate = dayjs(date).endOf(that.type).format('YYYY-MM-DD')
                }
                that.$store.commit(that.vuexModelName + '/updatePostParams', {
                  [that.id]: {
                    startDate: that.startDate,
                    endDate: that.endDate
                  }
                })
                if(this.type === 'week'){
                  this.startDate = new Date(this.startDate).getTime() + 3600 * 1000 * 24
                  this.endDate = new Date(this.endDate).getTime() + 3600 * 1000 * 24
                  this.startDate = dayjs(this.startDate).startOf('date').format('YYYY-MM-DD')
                  this.endDate = dayjs(this.endDate).startOf('date').format('YYYY-MM-DD')
                }
              }
              console.log(this.type)
              console.log(this.startDate)
              console.log(this.endDate)
              this.$emit("getDate",this.startDate,this.endDate)
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.timeBar {
    align-items: center;
    background: #fff;
    margin: 10px 10px 0;
    padding: 0 10px;
}
.ksdate {
    //width: 550px;
    display: inline-block;
    vertical-align: bottom;
    margin: 0 -17px;
    margin-bottom: 12px!important;
    margin-left: 10px!important;
}
.el-date-editor.el-input, .el-date-editor.el-input__inner{
  width: 100%;
}
</style>
<style>
.el-date-editor>.el-popper{
  position: absolute;
  top: 45px;
  right: 0;
  z-index: 2001;
}
</style>
